import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { setChannels } from "../store/modules/channelStore";
import axios from "axios";

function StoreChannel() {
    const { channelList } = useSelector(state => state.channel)
    const dispatch = useDispatch()
    
    // 异步请求
    const outerFetchChannelList = () => {
        return async (dispatch) => {
            const res = await axios.get('http://localhost:3005/channels');
            dispatch(setChannels(res.data));
        };
    };
    // 使用 useEffect 触发异步请求
    useEffect(() => {
        dispatch(outerFetchChannelList())
    }, [dispatch]);

    return (
        <div>
            <ul>
                {channelList.map(item => <li key={item.id}>{item.name}</li>)}
            </ul>
        </div>
    )
}


export default StoreChannel;